
<template>
    <div id="prize">
       <div class="prize__hd center">
           <div class="prizebox">
               <div class="prizebox-banner">
                   <img src="../images/inviteTop.png" alt="邀请好友图片">
               </div>
               <div class="prizebox-main">
                   <div class="main__top flex">
                       <i class="main__top-img"></i>
                       <span class="main__top-count omit">{{prize}}</span>人
                       <router-link to="/people">
                         <a class="main__top-look" href="#">查看</a>
                       </router-link>
                   </div>
                   <div class="main__bottom flex">
                        <i class="main__bottom-img"></i>
                       <span class="main__bottom-count omit">{{fangka}}</span>张房卡
                   </div>
               </div>
           </div>
       </div>
       <div class="prize__bd center">
           <router-link to="/guide">
              <img class="bd_flow" src="../images/yaoqingyouli1.png" alt="邀请流程">
           </router-link>
            <div class="bd_activity flex">
                <img src="../images/inviteTitle.png" alt="活动规则">
                <router-link class="ft_share" to="/rule">
                    <a href="#">活动规则</a>
                </router-link>
            </div>
            <img class="bd_order" src="../images/inviteStep.png" alt="分享顺序">
       </div>
       <div class="prize__ft center">
           <router-link class="ft_share" to="/share">
                <img class="share-btn" src="../images/dianjifenxiang1.png" alt="点击分享">
            </router-link>
       </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import utils from '../../scripts/utils'
    export default {
        data(){
            return{
                prize:'',
                fangka:''
            }
        },
        created(){
           //初始化数据
           this.getInvitePrize();
        },
        methods: {
            getInvitePrize:function(){
                axios.post('/api/mobile/invitePrize')
                .then((res) => {
                    this.prize = res.data.invitepeople;
                    this.fangka = res.data.ownRoomcard;
                })
                .catch(function (error){
                    console.log(error);
                });
            }
        }
    }
</script>
<style scoped>
    .flex{
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .omit{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    #prize{
        height:100%;
        overflow: hidden;
        color:#fff;
        background: url('../images/bg.png') no-repeat;
        background-size: 100% 100%;
    }
    .center{
        text-align:center;
    }
    .prize__hd{
        height:50%;
    }
    .prizebox{
        height:100%;
    }
    .prizebox-banner{
        height:55%;
    }

    .prizebox-banner img{
        width:100%;
        min-height: 169px;
    }

    .prizebox-main{
        height:45%;
        background: url('../images/zhongditu1.png') center /100% no-repeat;
        margin: 5px 15px;
        font-size: .4rem;
        overflow: hidden;
        font-weight: bold;
    }
    .prizebox-main a{
        color: #ffaf14;
    }
    .main__top,.main__bottom{
        float: left;
        width:50%;
        height:50%;
        margin-top:15%
    }

    .main__top-img{
        width: .41rem;
        height: .41rem;
        background: url('../images/invite_user.png') center /100% no-repeat;
    }
    .main__bottom-img{
        width: .25rem;
        height: .46rem;
        background: url('../images/invite_zhang.png') center /100% no-repeat;
    }
    .main__top-look{
        width: .8rem;
        height: .8rem;
        margin-left:5px;
    }
    .main__top-count,.main__bottom-count{
        max-width:35%;
        color: #fff79a;
        margin:0 5px;
    }

    /* 中间部分 */
    .prize__bd{
        height:35%;
    }
    .bd_flow,.bd_activity{
        height:20%
    }
    .bd_activity,.prize__bd{
        margin:10px;
    }
    .bd_order{
        height:40%
    }
    .bd_activity img{
        width:70%;
    }
    .bd_activity a{
        font-size: 0.3rem;
        vertical-align: middle;
        color: #cdbf00;
        font-weight: bold;
        text-decoration: underline;
    }
    /* 底部 */
    .prize__ft{
        height:10%;
        padding:10px;
    }
    .ft_share img{
        height:100%
    }
</style>